<template>
  <div class="node-property-panel">
    <!-- 基础信息 -->
    <div class="main-info-block">
      <h4 class="panel-title main">基础信息</h4>
      <el-form label-width="120px" class="main-form">
        <el-form-item label="节点ID">
          <el-input v-model="propertyPanel.id" disabled />
        </el-form-item>
        <el-form-item label="* 节点名称" :rules="[{ required: true, message: '节点名称必填', trigger: 'blur' }]">
          <el-input v-model="propertyPanel.name" @input="onPropertyChange" placeholder="请输入节点名称" />
        </el-form-item>
        <el-form-item label="节点类型">
          <el-input v-model="propertyPanel.type" disabled />
        </el-form-item>
        
        <!-- 优先级配置（用户任务和任务节点） -->
        <el-form-item label="任务优先级" v-if="['userTask', 'task'].includes(propertyPanel.type)">
          <el-select v-model="propertyPanel.priority" @change="onPropertyChange" placeholder="选择任务优先级">
            <el-option label="高" :value="1" />
            <el-option label="中" :value="2" />
            <el-option label="低" :value="3" />
            <el-option label="普通" :value="50" />
          </el-select>
        </el-form-item>
        
        <!-- 网关类型选择 -->
        <el-form-item label="网关类型" v-if="propertyPanel.type === 'gateway'">
          <el-select v-model="propertyPanel.gatewayType" @change="onGatewayTypeChange" placeholder="选择网关类型">
            <el-option label="条件网关" value="exclusive" />
            <el-option label="并行网关" value="parallel" />
            <el-option label="事件网关" value="event" />
          </el-select>
        </el-form-item>
        
        <!-- 任务类型选择 -->
        <el-form-item label="任务类型" v-if="propertyPanel.type === 'task'">
          <el-select v-model="propertyPanel.taskType" @change="onTaskTypeChange" placeholder="选择任务类型">
            <el-option label="服务任务" value="service" />
            <el-option label="脚本任务" value="script" />
          </el-select>
        </el-form-item>
        
        <!-- 服务任务类名 -->
        <el-form-item label="服务类名" v-if="propertyPanel.type === 'task' && propertyPanel.taskType === 'service'">
          <el-input v-model="propertyPanel.serviceClass" @input="onPropertyChange" placeholder="请输入服务类名" />
        </el-form-item>
        
        <!-- 脚本任务配置 -->
        <el-form-item label="脚本语言" v-if="propertyPanel.type === 'task' && propertyPanel.taskType === 'script'">
          <el-select v-model="propertyPanel.scriptLanguage" @change="onPropertyChange">
            <el-option label="JavaScript" value="javascript" />
            <el-option label="Groovy" value="groovy" />
            <el-option label="Python" value="python" />
          </el-select>
        </el-form-item>
        <el-form-item label="脚本内容" v-if="propertyPanel.type === 'task' && propertyPanel.taskType === 'script'">
          <el-input 
            v-model="propertyPanel.scriptContent" 
            type="textarea" 
            :rows="4"
            placeholder="请输入脚本内容"
            @input="onPropertyChange" 
          />
        </el-form-item>
        
        <!-- 子流程配置 -->
        <el-form-item label="子流程ID" v-if="propertyPanel.type === 'subProcess'">
          <el-input v-model="propertyPanel.subProcessId" @input="onPropertyChange" placeholder="请输入子流程ID" />
        </el-form-item>
        <el-form-item label="子流程名称" v-if="propertyPanel.type === 'subProcess'">
          <el-input v-model="propertyPanel.subProcessName" @input="onPropertyChange" placeholder="请输入子流程名称" />
        </el-form-item>
        <el-form-item label="子流程版本" v-if="propertyPanel.type === 'subProcess'">
          <el-input-number v-model="propertyPanel.subProcessVersion" @change="onPropertyChange" :min="1" placeholder="请输入版本号" />
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 网关专用配置 -->
    <div class="main-info-block" v-if="propertyPanel.type === 'gateway'">
      <h4 class="panel-title main">网关配置</h4>
      <el-form label-width="120px" class="main-form">
        <el-form-item label="默认路径" v-if="propertyPanel.gatewayType === 'exclusive'">
          <el-input v-model="propertyPanel.defaultPath" @input="onPropertyChange" placeholder="请输入默认路径ID" />
        </el-form-item>
        <el-form-item label="完成条件" v-if="propertyPanel.gatewayType === 'parallel'">
          <el-select v-model="propertyPanel.completionCondition" @change="onPropertyChange">
            <el-option label="全部完成" value="all" />
            <el-option label="任一完成" value="any" />
            <el-option label="指定数量" value="count" />
          </el-select>
        </el-form-item>
        <el-form-item label="完成数量" v-if="propertyPanel.gatewayType === 'parallel' && propertyPanel.completionCondition === 'count'">
          <el-input-number v-model="propertyPanel.completionCount" @change="onPropertyChange" :min="1" placeholder="请输入完成数量" />
        </el-form-item>
        <el-form-item label="事件类型" v-if="propertyPanel.gatewayType === 'event'">
          <el-select v-model="propertyPanel.eventType" @change="onPropertyChange">
            <el-option label="消息事件" value="message" />
            <el-option label="定时事件" value="timer" />
            <el-option label="信号事件" value="signal" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 人员配置（除抄送节点、网关节点、开始/结束节点外） -->
    <div class="main-info-block" v-if="!['cc', 'gateway', 'event'].includes(propertyPanel.type)">
      <h4 class="panel-title main">人员配置</h4>
      <PersonnelConfigDisplay
        :model-value="propertyPanel.assignees"
        :cc-model-value="propertyPanel.cc"
        :notification-methods="propertyPanel.notifyMethods"
        :default-handler-collapsed="false"
        :default-cc-collapsed="false"
        config-type="handler"
        @update:model-value="onAssigneesChange"
        @update:cc-model-value="onCcAssigneesChange"
        @notification-methods-change="onNotificationMethodsChange"
        @open-selector="onOpenSelector"
      />
    </div>
    
    <!-- 并行/串行配置（用户任务和任务节点） -->
    <div class="main-info-block" v-if="['userTask', 'task'].includes(propertyPanel.type)">
      <h4 class="panel-title main">会签配置</h4>
      <CountersignConfig 
        :countersign="propertyPanel.countersign"
        :assignees="propertyPanel.assignees"
        @change="onPropertyChange"
      />
    </div>
    
    <!-- 监听器配置（单独模块） -->
    <div class="main-info-block" v-if="['userTask', 'task', 'gateway', 'event', 'subProcess'].includes(propertyPanel.type)">
      <h4 class="panel-title main">监听器配置</h4>
      <ListenerConfig 
        :listeners="propertyPanel.listeners"
        @change="onPropertyChange"
      />
    </div>
    
    <!-- 高级设置 -->
    <div class="main-info-block" v-if="['userTask', 'task', 'subProcess'].includes(propertyPanel.type)">
      <h4 class="panel-title main">高级设置</h4>
      <AdvancedConfig 
        :advanced="propertyPanel.advanced"
        @change="onPropertyChange"
      />
    </div>
    
    <!-- 样式设置模块 -->
    <div class="main-info-block">
      <h4 class="panel-title main" @click="toggleStylePanel" style="cursor: pointer;">
        <span>样式设置</span>
        <span style="float: right; font-size: 14px;">{{ stylePanelExpanded ? '▼' : '▶' }}</span>
      </h4>
      <div v-show="stylePanelExpanded">
        <StyleConfig 
          :style="propertyPanel.nodeStyle"
          @change="onStyleChange"
        />
      </div>
    </div>
    
    <el-button type="danger" size="default" @click="handleDelete" style="margin-top:24px;">删除节点</el-button>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import PersonnelConfigDisplay from '@/components/Workflow/components/PersonnelConfigDisplay.vue'
import CountersignConfig from './configs/CountersignConfig.vue'
import ListenerConfig from './configs/ListenerConfig.vue'
import AdvancedConfig from './configs/AdvancedConfig.vue'
import StyleConfig from './configs/StyleConfig.vue'

const props = defineProps({
  node: Object,
  propertyPanel: Object
})

const emit = defineEmits(['propertyChange', 'delete', 'openSelector'])

// 样式设置面板展开状态
const stylePanelExpanded = ref(false)

/**
 * 处理属性变更
 */
function onPropertyChange() {
  emit('propertyChange')
}

/**
 * 处理网关类型变更
 */
function onGatewayTypeChange() {
  onPropertyChange()
}

/**
 * 处理任务类型变更
 */
function onTaskTypeChange() {
  onPropertyChange()
}

/**
 * 处理样式变更
 */
function onStyleChange(style) {
  props.propertyPanel.nodeStyle = style
  onPropertyChange()
}

/**
 * 处理删除操作
 */
function handleDelete() {
  emit('delete')
}

/**
 * 处理打开选择器
 */
function onOpenSelector(data) {
  console.log('NodePropertyPanel - onOpenSelector called:', data)
  emit('openSelector', data)
}

/**
 * 处理人员配置变更
 */
function onAssigneesChange(assignees) {
  props.propertyPanel.assignees = assignees
  onPropertyChange()
}

/**
 * 处理抄送配置变更
 */
function onCcAssigneesChange(cc) {
  props.propertyPanel.cc = cc
  onPropertyChange()
}

/**
 * 处理通知方法变更
 */
function onNotificationMethodsChange(methods) {
  props.propertyPanel.notifyMethods = methods
  onPropertyChange()
}

/**
 * 切换样式设置面板的展开/收起状态
 */
function toggleStylePanel() {
  stylePanelExpanded.value = !stylePanelExpanded.value
}
</script>

<style scoped>
.node-property-panel {
  width: 100%;
}

.main-info-block {
  background: #f5f7fa;
  border-radius: 8px;
  padding: 18px 12px 12px 12px;
  margin-bottom: 18px;
}

.panel-title.main {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.panel-title.sub {
  font-size: 16px;
  font-weight: bold;
  color: #606266;
  margin-bottom: 8px;
}

.main-form .el-form-item__label {
  font-weight: bold;
  color: #606266;
}
</style> 